// components/Address/Address.js
import { getProvList, getNextAddList } from '../../api/index'
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    checkList: {
      type: Array,
      value: []
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    addresList: [],//地区数据-3层结构
    activeIndex: 0,//当前选中的地区数据中，所挑选的
    nowChecked: [],//当前选中的地区
    lastChecked: [],//level为3的地区-特殊处理
    defArr: { name: '请选择' }
  },
  // 初始化
  attached: function () {
    const { checkList } = this.properties
    const { defArr } = this.data
    // 初始值
    if (checkList.length === 0) {
      // 未选择地区-使用默认值-并请求所有省级地区
      this.setData({ nowChecked: [defArr] })
      this.provList()
    } else {
      // 已选地址-长度为3
      const lastIndex = checkList.length - 1
      // 去除最后一项地区，拼接默认值，作为头部显示行
      // 最后一项作为lastChecked，并在页面对其进行选中效果展示
      let checked = checkList.slice(0, lastIndex)
      checked.push(defArr)

      this.setData({ activeIndex: lastIndex, nowChecked: checked, lastChecked: [checkList[lastIndex]] })
      // id为倒数第一项的父级ID-pid
      const id = checkList[lastIndex].pid
      // 请求对应id的地区数据-渲染
      this.nextAddList(id)
    }
  },
  /**
   * 组件的方法列表
   */
  methods: {
    // 请求省级地区数据
    provList() {
      getProvList().then(res => {
        const { data = [] } = res
        this.setData({ addresList: data })
      })
    },
    // 头部选中地区行的更改
    activeIndexChange(e) {
      // 当前点击的下标
      const { index } = e.target.dataset
      const { nowChecked, defArr } = this.data
      const finalIndex = index > 0 ? index : 0
      // 截取下标之前的选中部分
      let checked = nowChecked.slice(0, finalIndex)
      // 拼接默认值-由页面渲染
      checked.push(defArr)
      // lastChecked点击 头部行选中地区 的下标项
      this.setData({ nowChecked: checked, activeIndex: index, lastChecked: [nowChecked[finalIndex]] })
      if (index > 0) {
        // 选中下表项的父级ID-pid，请求其地区数据
        this.nextAddList(nowChecked[finalIndex].pid)
      } else {
        // 若点击第0项-请求省级数据
        this.provList()
      }
    },
    // 选中地区变化
    checkListChange(e) {
      const { nowChecked, defArr } = this.data
      // 当前选中地区列表的下标极限
      const lastIndex = nowChecked.length > 0 ? nowChecked.length - 1 : 0
      // 当前选中的地区项-item
      const { item } = e.target.dataset
      // 因为初始拼接了一层默认项，则需要截取掉
      let checked = nowChecked.slice(0, lastIndex)
      // 所选地区未符合要求-即未选中到最后一级地区
      if (item.level !== 3) {
        // 拼接已选中地区
        checked.push(item)
        // 拼接默认项
        checked.push(defArr)
        // 头部行的活跃项，默认最后一项
        this.setData({ nowChecked: checked, activeIndex: checked.length - 1 })
        // 获取当前地区的子级地区
        this.nextAddList(item.id)
      } else {
        // 地区选择完成
        let lastChecked = [item]
        // 不进行额外的nowChecked赋值，使用默认项+列表形式展现
        this.setData({ lastChecked, activeIndex: nowChecked.length - 1 })
        // 组装完整地区数据
        const params = checked.concat(lastChecked)
        // 向父组件传递选中信息
        this.triggerEvent("addChange", params)
      }

    },
    // 请求下一地区
    nextAddList(id) {
      getNextAddList(id).then(res => {
        this.setData({ addresList: res.data })
      })
    }
  }
})
